<template>
    <ManageCard ref="manageCard" :numberOfEntries="bodyData.totalElements" @fulsh="getBodyData"
        @currentChange="currentChange" :isShowAddBtn="false" @clickOfAddBtn="clickOfAddBtn"
        :page-size="requestParam.pageSize" :page-number="requestParam.pageNumber">
        <el-table max-height="calc(100vh - 255px)" 

        :data="bodyData.content" style="width: 100%;">
            <!-- 序号 -->
            <el-table-column type="index" width="60px"></el-table-column>

            <el-table-column label="ID" width="200px">
                <template #header>
                    <div class="item-title">帖子ID</div>
                    <div><el-input v-model="requestParam.data.and.eq[0].id" :placeholder="store.appFront.search" size="mini"
                            clearable @keyup.enter="getBodyData"></el-input></div>
                </template>

                <template #default="scope">
                    <div style="text-align: center;">{{ scope.row.id }}</div>
                </template>
            </el-table-column>


            <el-table-column label="用户ID" width="200px">
                <template #header>
                    <div class="item-title">用户ID</div>
                    <div><el-input v-model="requestParam.data.and.eq[0].userId" :placeholder="store.appFront.search"
                            size="mini" clearable @keyup.enter="getBodyData"></el-input></div>
                </template>

                <template #default="scope">
                    <div style="text-align: center;">{{ scope.row.userId }}</div>
                </template>
            </el-table-column>

            <el-table-column label="用户头像" width="100px">
                <template #header>
                    <div class="item-title">用户头像</div>
                </template>

                <template #default="scope">
                    <div style="text-align: center;">
                        <el-image :src="$kt.file.visit(scope.row.ovoUser.user.fileIdOfAvatar)"
                            style="width: 80px; height: 80px;"></el-image>
                    </div>
                </template>
            </el-table-column>

            <el-table-column label="用户昵称" width="100px">
                <template #header>
                    <div class="item-title">用户昵称</div>
                </template>

                <template #default="scope">
                    <div style="text-align: center;">
                        {{ scope.row.ovoUser.user.nickname }}
                    </div>
                </template>
            </el-table-column>

            <!-- 审核状态 -->
            <el-table-column width="200px" label="审核状态">
                <template #header>
                    <div class="item-title">审核状态</div>
                    <div style="text-align: center;">
                        <el-select v-model="requestParam.data.and.eq[0].auditStatusCode" placeholder="请选择" size="mini"
                            @change="getBodyData">
                            <el-option label="全部"
                                :value="null"></el-option>

                            <el-option v-for="(item, index) in auditStatusCodeList" :key="index" :label="item.label"
                                :value="item.value"></el-option>
                        </el-select>
                    </div>
                </template>

                <template #default="scope">
                <div>
                    <div style="text-align: center;
                    ">{{ auditStatusCodeMap[scope.row.auditStatusCode] }}
                    <span v-if="scope.row.auditStatusCode=='reject'&&scope.row.auditRejectReason!=null&&scope.row.auditRejectReason!=''">
                        ({{ scope.row.auditRejectReason }})
                    </span>
                    </div>
                   
                </div>
                </template>
            </el-table-column>


            <!-- 帖子 -->
            <el-table-column label="帖子内容" width="300px">
                <template #header>
                    <div class="item-title">帖子内容</div>
                    <div><el-input v-model="requestParam.data.and.eq[0].content" :placeholder="store.appFront.search"
                            size="mini" style="max-width: 200rpx;" clearable @keyup.enter="getBodyData"></el-input></div>
                </template>

                <template #default="scope">
                    <div style="
                    mini-width: 200px;
                    ">
                        <div v-if="scope.row.content == null || scope.row.content == ''" style="color:#999">无</div>
                        <div v-for="(item, index) in scope.row.content.split('\n')" :key="index">
                            {{ item }}
                        </div>
                    </div>
                </template>
            </el-table-column>


            <!-- 图片 -->
            <el-table-column label="帖子图片" width="500px">
                <template #header>
                    <div class="item-title">帖子图片</div>
                </template>

                <template #default="scope">
                    <div style="text-align: center;">
                        <div v-if="scope.row.imageList.length == 0">无</div>
                        <el-image v-for="(item, index) in scope.row.imageList" :key="index"
                            :src="$kt.file.visit(item.fileId)" :z-index="999"
                            :preview-src-list="imageListToSrcList(scope.row.imageList)" :preview-teleported="true"
                            :initial-index="1" fit="cover" style="width: 120px; height: 120px" />
                    </div>
                </template>
            </el-table-column>

            <el-table-column label="经纬度" width="300px">
                <template #header>
                    <div class="item-title">经度</div>
                </template>

                <template #default="scope">
                    <div style="text-align: center;">
                        <div>
                            <div style="color: #999;">发帖时经纬度</div>
                            <div>{{ scope.row.longitude }}{{ " , " }}{{ scope.row.latitude }}</div>
                        </div>
                        <div style="height: 10rpx;"></div>
                        <div
                        v-if="scope.row.longitudeOfSelect != null && scope.row.latitudeOfSelect != null"
                        >
                            <div style="color: #999;">选择的经纬度</div>
                        <div>
                            {{ scope.row.longitudeOfSelect }}{{ " , " }}{{ scope.row.latitudeOfSelect  }}
                        </div>
                        </div>
                    </div>
                </template>
            </el-table-column>

            <el-table-column label="选择显示的地址"
            prop="addressTitleOfSelect"
             width="300px">
                <template #header>
                    <div class="item-title">选择显示的地址</div>
                </template>
                <template #default="scope">
                    <div style="text-align: center;">
                        <div
                        style="color:#999"
                         v-if="scope.row.addressTitleOfSelect == null || scope.row.addressTitleOfSelect == ''">无</div>
                        <div v-else>{{ scope.row.addressTitleOfSelect }}</div>
                    </div>
                </template>

            </el-table-column>

            
            <!-- 一级行政区 -->
            <el-table-column label="一级行政区"
             width="300px">
                <template #header>
                    <div class="item-title">一级行政区</div>
                    <div><el-input v-model="requestParam.data.and.vague[0].province" :placeholder="store.appFront.province"
                            size="mini" style="max-width: 200rpx;" clearable @keyup.enter="getBodyData"></el-input></div>
                </template>
                <template #default="scope">
                    <div style="text-align: center;">
                        <div
                        style="color:#999"
                         v-if="scope.row.province == null || scope.row.province == ''">未知</div>
                        <div v-else>{{ scope.row.province }}</div>
                    </div>
                </template>

            </el-table-column>

            <!-- 二级行政区 -->
            <el-table-column label="二级行政区"
             width="300px">
                <template #header>
                    <div class="item-title">二级行政区</div>
                    <div><el-input v-model="requestParam.data.and.vague[0].city" :placeholder="store.appFront.province"
                            size="mini" style="max-width: 200rpx;" clearable @keyup.enter="getBodyData"></el-input></div>
                </template>
                <template #default="scope">
                    <div style="text-align: center;">
                        <div
                        style="color:#999"
                         v-if="scope.row.city == null || scope.row.city == ''">未知</div>
                        <div v-else>{{ scope.row.city }}</div>
                    </div>
                </template>

            </el-table-column>

            <!-- 三级行政区 -->
            <el-table-column label="三级行政区"
             width="300px">
                <template #header>
                    <div class="item-title">三级行政区</div>
                    <div><el-input v-model="requestParam.data.and.vague[0].district" :placeholder="store.appFront.district"
                            size="mini" style="max-width: 200rpx;" clearable @keyup.enter="getBodyData"></el-input></div>
                </template>
                <template #default="scope">
                    <div style="text-align: center;">
                        <div
                        style="color:#999"
                         v-if="scope.row.district == null || scope.row.district == ''">未知</div>
                        <div v-else>{{ scope.row.district }}</div>
                    </div>
                </template>

            </el-table-column>




            <!-- 创建时间 -->
            <el-table-column width="300px">
                <template #header>
                    <div class="item-title">{{ store.appFront.createTime }}</div>
                    <!-- 时间选择器 -->
                    <div style="width: 100%;text-align: center;">
                        <!-- 开始时间 -->
                        <el-date-picker style="width: 100px;" v-model="requestParam2.createStart" type="datetime"
                            size="mini" :placeholder="store.appFront.startTime" @change="getBodyData">
                        </el-date-picker>
                        <!-- 结束时间 -->
                        <el-date-picker style="width: 100px;" v-model="requestParam2.createEnd" type="datetime" size="mini"
                            :placeholder="store.appFront.endTime" @change="getBodyData">
                        </el-date-picker>

                    </div>
                </template>
                <template #default="scope">
                    <div style="text-align: center;">{{ $kt.date.format(scope.row.gmtCreate, "yyyy-MM-dd HH:mm:ss") }}
                    </div>
                </template>
            </el-table-column>



            <!-- 操作，固定位置 -->
            <el-table-column fixed="right" lable="操作" :width="'125px'">
                <template #default="scope">
                    <el-button v-if="scope.row.auditStatusCode == 'wait'" @click="dialogOfAuditInTableCardOpen(scope.row)"
                        type="text" ref="editButton" size="small">
                        审核
                    </el-button>
                </template>
            </el-table-column>

        </el-table>
        <DialogOfAuditInTableCard
        @submit="getBodyData"
         ref="dialogOfAuditInTableCard"></DialogOfAuditInTableCard>
    </ManageCard>
</template>

<script lang="ts" setup>
import { ref, defineExpose, onMounted } from 'vue';
import $kt from '@/vueKantboot';
import { useStore } from '@/stores/counter';
import ManageCard from '@/views/manage/components/ManageCard.vue';
import DialogOfAuditInTableCard from './DialogOfAuditInTableCard.vue';

let store = useStore();

let byteLength = (str: string) => {
    return str.replace(/[^x00-xFF]/g, '**').length;
}

let dialogOfAuditInTableCard = ref();

let dialogOfAuditInTableCardOpen = (row: any) => {
    dialogOfAuditInTableCard.value.open(row);
}

let manageCard = ref();

let requestParam2 = ref({
    createStart: null,
    createEnd: null,
});

/**
 * 审核状态编码
 * 待审核 wait
 * 审核通过 pass
 * 审核不通过 reject
 * 审核中 ing
 * 审核异常 error
 */
let auditStatusCodeMap = ref({
    wait: '待审核',
    pass: '审核通过',
    reject: '审核不通过',
    ing: '审核中',
    error: '审核异常',
});

// 将map转换为数组
let auditStatusCodeList = ref(Object.keys(auditStatusCodeMap.value).map((key) => {
    return {
        label: auditStatusCodeMap.value[key],
        value: key,
    }
}));

let requestParam = ref(
    {
        "pageNumber": 1,
        "pageSize": 30,
        "sortType": "DESC",
        "sortField": "gmtCreate",
        "data": {
            "and": {
                eq: [
                    {
                        id: null,
                        userId: null,
                        auditStatusCode: 'wait',
                    }
                ],
                vague: [
                    {
                        province: null,
                        city: null,
                        district: null,
                    }
                ],
                "ge": [
                    {
                        gmtCreate: null
                    }
                ],
                "le": [
                    {
                        gmtCreate: null
                    }
                ]
            },

            "entity": {},
        }
    }
);

let bodyData = ref({
    "number": 1,
    "size": 5,
    "totalPage": 0,
    "totalElements": 0,
    "gmtModified": "2023-04-10 17:02:26",
    "content": [
    ],
});

let groupCodeSelected = ref('');


let getBodyData = () => {

    if (requestParam2.value.createStart != null && requestParam2.value.createStart != "") {
        requestParam.value.data.and.ge[0].gmtCreate = new Date().getTime();
    } else {
        requestParam.value.data.and.ge[0].gmtCreate = null;
    }
    if (requestParam2.value.createEnd != null && requestParam2.value.createEnd != "") {
        requestParam.value.data.and.le[0].gmtCreate = new Date().getTime();
    } else {
        requestParam.value.data.and.le[0].gmtCreate = null;
    }


    $kt.request.request({
        url: '/adminManage/business/ovo/post/getPage',
        method: 'post',
        data: requestParam.value,
    }).then((res: any) => {
        bodyData.value = res.data.data;
    });
};

let imageListToSrcList = (imageList: any) => {
    let srcList: any = [];
    for (let i = 0; i < imageList.length; i++) {
        srcList.push($kt.file.visit(imageList[i].fileId));
    }
    return srcList;
}

let currentChange = (val: any) => {
    requestParam.value.pageNumber = val;
    getBodyData();
};
getBodyData();


// business/ovo/sexualOrientation/getMap
/**
 * 性取向字典
 */
let sexualOrientationMap = {
}


let getSexualOrientationMap = () => {
    $kt.request.request({
        url: '/business/ovo/sexualOrientation/getMap',
        method: 'post',
        data: {},
    }).then((res: any) => {
        sexualOrientationMap = res.data.data;
    });
}

// business/ovo/sexualOrientation/getList

/**
 * 性取向列表
 */
let sexualOrientationList = [

]

let getSexualOrientationList = () => {
    $kt.request.request({
        url: '/business/ovo/sexualOrientation/getList',
        method: 'post',
        data: {},
    }).then((res: any) => {
        sexualOrientationList = res.data.data;
    });
}

getSexualOrientationMap();
getSexualOrientationList();



defineExpose({
});
</script>


<style lang="scss" scoped>
.card {
    position: relative;
    height: 100%;
    box-shadow: none;
    border: 2px solid #ebeef5;
}

.title {
    color: #666666;
    text-align: center;
}

.cell-class {
    cursor: pointer;
}

.refresh:active {
    transform: rotate(45deg);
}

.no {
    color: #999999;
    text-align: center;
}

.item-title {
    text-align: center;
}
</style>